<template>
  <!-- 方案规划导航栏 -->
   <div style="width: 100%;height: 100%;text-align: center;">

  
    <div style="" class="box">
      
      <div class="titleDiv">
        <div class="barColorBox"></div> 
        <div class="titlefont">数据看板</div>
      </div> 

      <div style="width: 100%;height: 93%;text-align: center;margin-top: 1vh;"> 
             
        <div style="width: 100%;height: 100%;margin-top: 1vh;">
          
          <div style="display: block;width: 95%;max-height:73%;height:auto;margin: 0 auto;overflow: hidden;overflow-y: auto;">
            
            <div v-for="item in pageInfo" v-bind:key="item" style="display: block;width: 77%;height: 29%;margin: 2vh auto;color: rgb(242, 242, 242);font-size: 0.9vw;background: #28508b78;border: 1px solid rgb(16 93 209);border-radius:5px;"> 

              <div style="display: inline-flex;margin-top: 5px;">
                <img style="height: 24px;margin-top: 0.2vh;" src="../../assets/images/tips2.png">
                <div style="margin-left: 10px;font-family:emoji;">{{ item.plantName }} 到 {{ item.stationName }} </div>
              </div>

              <div>周期内输送氢气总量：{{ item.dataValue6 }} kg</div>
              <div>总成本费用：{{ item.dataValue7 }} 万元</div>
              <div>平准化输氢成本(LCOH)：{{ item.dataValue8 }} ￥/kg</div>

            </div>
          


          </div>
                 
             
          <div class="inputBox">
            <div style="padding-top: 1vh;;">规划方案总成本费用</div>
            <div>{{totalCost}}万元</div> 
          </div>

        </div>
           
 
      </div>
       
    </div>
 
 
  
  <div class="box2">
    <div id="pieCharts1" style="width: 98%;height: 98%;margin: 0 auto;"></div>
  </div>
     
 
</div>
  
</template>

<script>
  
  // 引入基本模板,按需加载
  let echarts = require('echarts/lib/echarts');

  import priceUtil from '../../assets/js/priceUtil.js'

  export default {
    name: 'htpdCostBreakdown',
    data() {
      return {
        pageInfo:[],
        totalCost:"",
        projectId : '',
      }
    },
    mounted: function() {
      this.projectId = this.$route.query.projectId;
      this.queryPageData();
    },
    methods: {
      
      queryPageData : function(){

        var vm = this;

        this.$http.post('/iepsapi/ea/hpEconomicAnalysis/queryHtpdCostBreakdown?projectId='+this.projectId).then((res) => {
          var result = res.data;
          if(result){
            
            vm.totalCost = result.totalCost;
            vm.pageInfo = result.data;

            var seriesData = result.seriesData;

            let pieCharts1 = this.$echarts.init(document.getElementById('pieCharts1')) ;

            var data1 = [
              { value: 0, name: "-" },
              { value: 0, name: "-" }, 
            ];

            var pieOption1 = this.getPieOption("万元"); 

            if(seriesData){
              pieOption1.series[0].data = seriesData;
            }else{
              pieOption1.series[0].data = data1;
            }
            pieOption1.title.text = "方案总成本费用构成";
 
            pieCharts1.clear();  
            pieCharts1.setOption(pieOption1);  

            window.onresize = function(){
              pieCharts1.resize();  
            }


          }
        }).catch((error) => {
          console.log(error);
        });


      },


      getPieOption:function(unit){
          
        const color = ["#3254DD", "#EF7BE3", "#22E59C", "#F9925A", "#22E5E5"]

        var pieOption = {
          color,
          title: { x: "center",
            text: '',
            top:"6%",
            textStyle: {
              color: '#f2f2f2', // 标题字体颜色为黑色
              fontSize: 16, // 标题字体大小为24px
              fontWeight: 'bold', // 标题字体加粗
            },
          },
          
          legend: {
            show: true,
            x: "center", //可设置图例位置
            y: "bottom", 
            icon: "rect",
            itemWidth: 16,
            itemHeight: 16,
            width: "800",
            textStyle: {
              //图例文字的样式
              color: "#b4e4ff",
              fontSize: 16,
              // 给出高度和rich对象，实现图标与文字居中对齐
              height: 12,
              rich: {
                  a: {
                    verticalAlign: "middle",
                  },
              },
            },
        },
          tooltip: {
            trigger: "item",
            extraCssText: "width: 128px;  box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);",
            formatter: function (params) {
              let str =
                (params.data &&
                  `<div style="font-weight: bold;">${params.name}</div>
                  <div style="display:flex; justify-content: space-between; align-items: center;">
                      <span><span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: ${color[params.dataIndex]}; margin-right: 4px;"></span>占比</span>
                      <span>${params.percent}%</span>
                  </div>`) ||
                "";
              return str;
            }
          },
          series: [
            {
              type: "pie",
              radius: "60%",
              center: ["50%", "50%"],
              label: {
                normal: {
                  formatter: "{xx|{b}：}{c} "+unit,
                  rich: {
                    xx: {
                      fontSize: 14,
                      lineHeight: 32
                    }
                  }
                }
              },
              data: [],
              itemStyle: {
                emphasis: { // 鼠标经过扇形区域时的阴影效果
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              },
              labelLine: {
                normal: {
                  length: 5,
                  length2: 20,
                  smooth: true
                }
              }
            }
          ]
        };

        return pieOption;
      },
       

    }
  }
</script>



<style>

.el-table{
  background-color: rgb(20 34 78);
  color: #FFFFFF;
  border-color: rgb(24 63 124 / 51%);
  *{
    border-color: rgb(24 63 124 / 51%) !important;
  }
  .el-table__header-wrapper{
    tr{
      background-color: rgb(10 24 90 / 81%);
      th{
        color: #ffffff;
        background-color: rgba(0,0,0,0.4);
      }
    }
  }
  .el-table__body-wrapper{
    tr{
      background-color: rgb(8 26 80 / 88%);
      &:hover>td{      
        background-color: rgb(13 30 80);
      }
    }
  }
}
  .el-form--inline .el-form-item__content {
      display: inline-block;
      vertical-align: middle;
      margin-left: 1vh;
  }

  .el-radio {
      color: #eff4ff;
      cursor: pointer;
      margin-right: 30px;
  }

  .el-form-item {
      margin-bottom: 5px;
  }
  .el-form-item__label {
      text-align: right;
      vertical-align: middle;
      float: left;
      font-size: 14px;
      color: #f2f2f2;
      line-height: 40px;
      padding: 0 1px 0 0;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
  }
  .el-input__inner { 
      background-color: #202b6180;
      background-image: none;
      border-radius: 4px;
      border: 1px solid #5c7bc5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: #a3aec5;
      display: inline-block;
      font-size: inherit;
      height: 40px;
      line-height: 40px;
      outline: 0;
      padding: 0 15px;
      -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      transition: border-color .2s cubic-bezier(.645,.045,.355,1);
      width: 100%;
  }

  .el-input-group__append, .el-input-group__prepend {
    background-color: #305997;
    color: #ffffff;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #506aa7;
    border-radius: 4px;
    padding: 0 20px;
    width: 1px;
    white-space: nowrap;
  }
</style>


<style scoped> 


  
.titleDiv {
   width: 100%;
   margin: 0.5vh;
   height: 2.5vh; 
   font-weight: bold; 
   -webkit-box-shadow: none;
   box-shadow: none;
   font-weight: 700;
   font-style: normal;
   font-size: 2vh;
   color: #f2f2f2;
   text-align: left;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   position: relative;
 }
 .barColorBox {
   height: 2.5vh;
   width: 0.7vh;
   border-radius: 1px;
   display: inline-block;
   vertical-align: text-bottom;
   border: none;
   box-shadow: 0 -1px 10px rgba(0,0,0,0.1);
   background-color: #FAFAFA;
   background-image: -webkit-linear-gradient(top,#17b4db,#07c968);
   background-image: -o-linear-gradient(top,#17b4db,#07c968);
   background-image: -ms-linear-gradient(top,#17b4db,#07c968);
   background-image: linear-gradient(top,#17b4db,#07c968);
   background-repeat: repeat-x;
 }

 .titlefont {
   flex: 1;
   height: 100%;
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   font-size: 1.8vh;
    padding-left: 5px;
    margin-top: 0vh;
 }

.inputBox{
    background-image: url(../../assets/images/infoBackground3.png);
    margin: 1vh auto;
    margin-left: 7vh;
    width: 75%;
    height: 8vh;
    background-repeat: round;
    opacity: 0.8;
    border-radius: 6px;
    font-size: 1vw;
    color: #ffffff;
  }

  .buttonStyle {
    height: 4vh;
    width: 24vh;
    display: inline-block;
    -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    cursor: pointer;
    border-radius: 10px;
    font-family: Arial;
    border: none;
    color: #ffffff;
    font-size: 1.6vh;
    background: #161E43;
    border-bottom: 1px solid rgb(64, 158, 255);
    margin: 1.5vh 10px;
    text-align: center;
    line-height: 4vh;
    vertical-align: middle;
    text-decoration: none;
  }

  .box{ 
    width: 29.7%;
    height: 96%;
    position: absolute;
    left: 1.5vh;
    top: 1.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

 

  .box2{ 
    width: 67.5%;
    height: 96%;
    position: absolute;
    left: 53vh;
    top: 1.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  

  .box3{ 
    width: 33%;
    height: 47%;
    position: absolute;
    left: 112.2vh;
    top: 1.5vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box4{ 
    width: 34%;
    height: 47%;
    position: absolute;
    left: 53.3vh;
    top: 36.2vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

  .box5{ 
    width: 33%;
    height: 47%;
    position: absolute;
    left: 112.2vh;
    top: 36.2vh;
    margin: auto;
    border-radius: 5px; 
    background: #202b614f;
    border: 1px solid rgb(62 111 219 / 88%);
  }

   

  .titleCss{
    font-size: 22px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.2;
    color: #f2f2f2;
  }
</style>
